<!--  -->
<template>
    <div>
       <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
             <el-row :gutter = "20">
                <el-col :span = "8">
                    <el-input placeholder="请输入内容"  class="input-with-select" size = "large"
                     v-model = "query"
                     clearable
                     @clear = "getGoodsList"
                    >
                    <el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span = "4">
                    <el-button type="primary" @click="addGoods">添加商品</el-button>
                </el-col>
             </el-row>
             <!-- 表格数据 -->
             <el-table
                :data="goodsList" border stripe
                style="width: 100%">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column 
                    prop="goods_name"
                    label="商品名称"
                >
                </el-table-column>
                <el-table-column
                    prop="goods_price"
                    label="商品价格(元)"
                    width="110px"
                >
                </el-table-column>
                <el-table-column
                    prop="goods_weight"
                    label="商品重量"
                    width="80px"
                >
                 </el-table-column>
                 <el-table-column
                    prop="add_time"
                    label="创建时间"
                    width="180px"
                >
                    <template slot-scope="scope">
                      {{scope.row.add_time | dateFormat}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="130px"
                >
                    <template slot-scope="scope">
                       <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
                       <el-button type="danger" icon="el-icon-delete" size="mini" @click="delGoods(scope.row.goods_id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页效果 -->
            <div class="block">
                <el-pagination
                :page-sizes="[10, 20, 30, 40]"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="pagesize"
                :current-page="pagenum"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </el-card>
        <!-- 添加商品的dialog -->
        <!-- <el-dialog title="商品信息" :visible.sync="dialogFormVisible" @close = "close">
        <el-form :model="form" :rules="rules" ref="ruleForm">
            <el-form-item label="用户名" :label-width="formLabelWidth" prop = "goods_name">
                <el-input v-model="form.goods_name" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="分类" :label-width="formLabelWidth" prop = "goods_cat">
                <el-input v-model="form.goods_cat" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="价格" :label-width="formLabelWidth" prop = "goods_price">
                <el-input v-model="form.goods_price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="数量" :label-width="formLabelWidth"  prop = "goods_number">
                <el-input v-model="form.goods_number" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="重量" :label-width="formLabelWidth"  prop = "goods_weight">
                <el-input v-model="form.goods_weight" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addGoods">确 定</el-button>
            </div>
        </el-dialog> -->
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    // 查询参数
    query:"",
    pagenum:1,
    pagesize:10,
    dialogFormVisible:false,
    goodsList:[],
    total:0,
    // 添加商品的dialog
    dialogFormVisible:false,
    formLabelWidth:"120px",
    form:{
        goods_name:"",
        goods_cat:"",
        goods_price:"",
        goods_number:"",
        goods_weight:"",
        goods_introduce:"",
        pics:"",
        attrs:""
    },
     rules:{
          goods_name: [
            { required: true, message: '请输入商品名称', trigger: 'blur' },
            { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
          ],
           goods_cat: [
            { required: true, message: '请输入商品分类', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
          goods_price: [
            { required: true, message: '请输入商品价格', trigger: 'blur' },
          ],
          goods_number: [
            { required: true, message: '请输入商品数量', trigger: 'blur' },
          ],
          goods_weight: [
            { required: true, message: '请输入商品重量', trigger: 'blur' },
          ],
    },
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    // 获取商品列表数据
    async getGoodsList(){
         const {data} = await this.$http({
            url:"goods",
            params:{
                query:this.query,
                pagenum:this.pagenum,
                pagesize:this.pagesize
            }
        });
        // console.log(data);
       
        if (data.meta.status == 200) {
            this.goodsList = data.data.goods;
            this.total = data.data.total;
        }
    },
    handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.pagesize = val;
        this.getGoodsList();
    },

    handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.pagenum = val;
        this.getGoodsList();
    },
    // 
    close(){
        this.$refs.ruleForm.resetFields()
    },
    // 添加商品
    addGoods(){
        // this.$refs.ruleForm.validate(async valid =>{
        //     if( !valid ) return
        //     // 校验成功,发送添加用户请求
        //     const {goods_name,goods_cat,goods_price,goods_number,goods_weight} = this.form;
        //     const { data }  = await this.$http({
        //         url:"goods",
        //         method:"POST",
        //         data:{
        //             goods_name,
        //             goods_cat,
        //             goods_price,
        //             goods_number,
        //             goods_weight
        //         }
        //     });
        //     console.log(data);
        //     if (data.meta.status = 200) {
        //         this.$message({
        //             type: 'success',
        //             message: '添加商品成功!'
        //         });
        //         this.dialogFormVisible = false;
        //         this.getGoodsList();
        //     }
        // })
        this.$router.push({name:"add"})
    },
    // 删除商品
    delGoods(id){
        this.$confirm('您确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
        const {data} = await this.$http.delete(`goods/${id}`)
        // console.log(data);
          this.$message({
            type: 'success',
            message: '已成功删除!'
          });
          this.getGoodsList();
          }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.getGoodsList();
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.el-breadcrumb{
    margin-bottom: 15px;
    font-size: 14px;
}
.el-table{
    margin-top: 15px;
}
.el-pagination{
    margin-top: 15px;
}
</style>